<template>
  <view class="page-container">
    <view class="header-container">
      <view class="left" @click="toBack"><text class="iconfont icon-back"></text></view>
      <view class="center">VR游西湖</view>
      <view class="right">
        <!-- <img src="~@/static/active_detail_slices/fenxiang@3x.png" alt=""> -->
      </view>
    </view>
    <view class="tabs-container">
      <view :class="{ tab: true, active: tabIndex === 'video' }" @click="onChange('video')">
        <view class="label">
          <text>VR视频</text>
          <view class="high-light"></view>
        </view>
      </view>
      <view :class="{ tab: true, active: tabIndex === 'image' }" @click="onChange('image')">
        <view class="label">
          <text>VR全景图</text>
          <view class="high-light"></view>
        </view>
      </view>
    </view>
    <view class="main-container">
      <view v-if="tabIndex === 'video'" class="videos-container">
        <view class="video" v-for="(video, index) in videoList" :key="index">
          <view class="img-show">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/vr_slices/video_test.jpeg'" alt="">
            <text class="play-icon iconfont icon-icon_pla"></text>
            <view class="detail">
              <view class="count">
                <text class="iconfont icon-icon_play"></text>
                <text>1080</text>
              </view>
              <view class="time">
                <text class="iconfont icon-clock1"></text>
                <text>00:30</text>
              </view>
            </view>
          </view>
          <view class="name">阳陂湖</view>
        </view>
      </view>
      <view v-if="tabIndex === 'image'" class="images-container">
        <view class="image" v-for="(img, index) in imageList" :key="index">
          <view class="img-show">
            <img :src="$config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/vr_slices/video_test.jpeg'" alt="">
            <text class="play-icon iconfont icon-icon_pla"></text>
            <view class="detail">
              <view class="count">
                <text class="iconfont icon-yanjing"></text>
                <text>1080</text>
              </view>
              <view class="time">
                <text class="iconfont icon-clock1"></text>
                <text>00:30</text>
              </view>
            </view>
          </view>
          <view class="name">阳陂湖</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      tabIndex: "video",
      videoList: [{}, {}],
      imageList: [{}, {}]
    }
  },
  methods: {
    onChange(value: string) {
      this.tabIndex = value;
    },
    toBack() {
      uni.navigateBack({ delta: 1 })
    }
  }
})
</script>
<style scoped>
.page-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F4F7F7;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabs-container {
  color: #333333;
  height: 24px;
  padding-top: 12px;
  display: flex;
}

.tabs-container .tab {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tabs-container .tab .label {
  font-size: 16px;
  display: flex;
  flex-direction: column;
}

.high-light {
  height: 4px;
  margin-top: 4px;
  border-radius: 3px;
}

.tabs-container .tab.active .label {
  color: #006b65;
}

.tabs-container .tab.active .high-light {
  background-color: #006b65;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
}

.videos-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.video {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.video .img-show {
  position: relative;
}

.video .img-show img {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.video .img-show .play-icon {
  color: #FFFFFF;
  font-size: 16px;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 50%;
}

.video .img-show .detail {
  color: #FFFFFF;
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
}

.video .name {
  color: #333333;
  font-size: 16px;
}

.images-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.image {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.image .img-show {
  position: relative;
}

.image .img-show img {
  width: 100%;
  height: 200px;
  border-radius: 10px;
}

.image .img-show .play-icon {
  color: #FFFFFF;
  font-size: 16px;
  width: 100%;
  position: absolute;
  text-align: center;
  top: 50%;
}

.image .img-show .detail {
  color: #FFFFFF;
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
}

.image .name {
  color: #333333;
  font-size: 16px;
}
</style>